const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
const cssConcat = require('gulp-concat')
const cleanCss = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps')
const ts = require('gulp-typescript')
const tsProject = ts.createProject("tsconfig.json");
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const imagemin = require('gulp-imagemin');
const connect = require('gulp-connect')
    // 自动帮你打开浏览
const open = require('open')
    // const htmlmin = require('gulp-htmlmin')
    // 反向代理 解决跨域
const { createProxyMiddleware: proxy } = require('http-proxy-middleware')
const htmlmin = require('gulp-htmlmin')







function imageMinTask() {
    return src('src/assets/images/**/*.{jpg,png,jpeg,gif,PNG,webp}')
        .pipe(imagemin())
        .pipe(dest('./dist/images'))

}

function tsTask() {
    return src('src/scripts/ts/**/*.ts')
        .pipe(tsProject())
        .js.pipe(dest("dist/js"))
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(dest("dist/js"))
        .pipe(connect.reload())
}

function jsTask() {
    return src('src/scripts/js/**/*.js')
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(dest("dist/js"))
        .pipe(connect.reload())

}

function copyTask() {
    return src([
            'src/assets/**/*',
            '!src/assets/images/**/*',
        ])
        .pipe(dest('dist/assets'))
        .pipe(connect.reload())
}

function styleTask() {
    return src([
            'src/styles/**/*.scss'
        ])
        .pipe(sourcemaps.init())
        .pipe(sass())

    .pipe(autoprefixer({
            add: true,
            remove: true
        }))
        .pipe(cssConcat('main.css'))
        .pipe(cleanCss())
        .pipe(sourcemaps.write())
        .pipe(dest('dist/styles'))
        .pipe(connect.reload())
}

function cssTask() {
    return src([
        'src/styles/**/*.css'
    ])

    // .pipe(sourcemaps.init())
    .pipe(autoprefixer({
            add: true,
            remove: true
        }))
        .pipe(cleanCss())
        // .pipe(sourcemaps.write())
        .pipe(dest('dist/styles/'))
        .pipe(connect.reload())
}

function defaultTask(cb) {
    console.log('hello gulp')
    cb()
}

function serverTask() {
    connect.server({
            port: 82,
            root: 'dist',
            // 实时更新 热更新
            livereload: true,
            // 反向代理 服务器与服务器之间没有跨域问题
            middleware: function() {
                return [
                    proxy('/api', {
                        target: 'http://10.9.47.254',
                        changeOrigin: true,
                        pathRewrite: {
                            '^/api': ''
                        }
                    })
                ]
            }
        })
        // 打开浏览器，并访问到此网址
    open('http://localhost:82')
        // 监听对应文件的变化
    copyTask
    watch([
        'src/assets/**/*',
        '!src/assets/images/**/*',
    ], copyTask)
    watch('src/assets/images/**/*.{jpg,png,jpeg,gif,PNG,webp}', imageMinTask)
    watch('src/styles/**/*', cssTask)
    watch('src/styles/**/*', styleTask)
    watch('src/scripts/ts/**/*.ts', tsTask)
    watch('src/scripts/js/**/*.js', jsTask)
    watch('src/views/**/*.html', htmlTask)
}

function htmlTask() {
    return src('src/views/**/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(dest('dist'))
        // 有修改则通过静态服务器更新了
        .pipe(connect.reload())
}
module.exports.default = series(serverTask)

module.exports.build = series(
    copyTask,

    cssTask,
    styleTask,
    jsTask,
    tsTask,
    imageMinTask,
    htmlTask,
    defaultTask
)